
import {IssueQuery} from "@/app/issues/IssueTable";
import {ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon} from "@radix-ui/react-icons";
import {Button, Flex, Text} from "@radix-ui/themes";
import Link from "next/link";
import React from 'react';

interface Props{
    itemCount:number;
    currentPage:number;
    pageSize:number;
    searchParams:IssueQuery;
}
// currentPage 当前页
// pageSize 每页多少条
// itemCount 总条数
const Pagination = ({itemCount,currentPage,pageSize,searchParams}:Props) => {
    const pageCount = Math.ceil(itemCount/pageSize);
    if(pageCount<=1) return ;
    return (
        <Flex align={"center"} gap={"2"}>
            <Text size={"2"}>
                Page {currentPage} of {pageCount}
            </Text>
            <Button color={"gray"} variant={"soft"} disabled={currentPage===1}>
                <DoubleArrowLeftIcon/>
            </Button>
            <Button color={"gray"} variant={"soft"} disabled={currentPage===1}>
                {currentPage>1?<Link href={{query:{...searchParams,page:currentPage-1}}}> <ChevronLeftIcon/></Link>:<ChevronLeftIcon/>}
            </Button>
            <Button color={"gray"} variant={"soft"} disabled={currentPage===pageCount}>
                {currentPage<pageCount? <Link href={{query:{...searchParams,page:currentPage+1}}}> <ChevronRightIcon/></Link>:<ChevronRightIcon/>}
            </Button>
            <Button color={"gray"} variant={"soft"} disabled={currentPage===pageCount}>
                {currentPage<pageCount? <Link href={{query:{...searchParams,page:pageCount}}}> <DoubleArrowRightIcon/></Link>:<DoubleArrowRightIcon/>}
            </Button>
        </Flex>
    );
};

export default Pagination;